<template>
	<view class="login">
		<image src="../../static/pages_login/bg.png" class="bg" mode=""></image>
		<u-icon class="u-m-t-60 u-m-l-40" @click="$back" size="20"  style="margin: 60rpx 40rpx;" name='arrow-left'></u-icon>
		<view class="u-m-t-200 u-m-l-30"  style="margin: 200rpx 40rpx;">
			<view class="Title">忘记密码</view>
		</view>
		<view class="LoginForm">		
			<view class="u-m-t-50 flex LoginForm_title">
				<image src="/static/pages_login/account.png" mode=""></image>
				<text>手机号</text>
			</view>
			<view class="inputbox flex">
				<input type="number" placeholder="请输入手机号" v-model="mobile" placeholder-class="ppp">
				<view class="wrap flex" style="align-items: center;">
					<view class="shu u-m-r-20">

					</view>
					<u-toast ref="uToast"></u-toast>
					<u-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"></u-code>
					<text class="green" @tap="getCode">{{tips}}</text>
				</view>
			</view>
			<view class="u-m-t-50 flex LoginForm_title">
				<image src="/static/pages_login/yzm.png" mode=""></image>
				<text>验证码</text>
			</view>
			<view class="inputbox">
				<input type="number" placeholder="请输入验证码" v-model="yzm" placeholder-class="ppp">
			</view>
			<view class="u-m-t-50 flex LoginForm_title" style="justify-content: space-between;" >
				<view class="flex" style="align-items: center;">
					<image src="/static/pages_login/pwd.png" mode=""></image>
					<text>新密码</text>
				</view>
			</view>
			<view class="inputbox" >
				<input type="number" :password="true" placeholder="请输入密码" v-model="pwd" placeholder-class="ppp">
			</view>
			<!-- <view class="u-m-t-50 flex LoginForm_title" style="justify-content: space-between;" >
				<view class="flex" style="align-items: center;">
					<image src="/static/pages_login/pwd.png" mode=""></image>
					<text>确认密码</text>
				</view>
			</view>
			<view class="inputbox" >
				<input type="number" placeholder="请再次输入新密码" v-model="newpwd" placeholder-class="ppp">
			</view> -->
			<view class="mianbtn" @click="findpwd">
				确定
			</view>
			
		</view>
		<view class="bottom flex-cneter" @click="tologin">
			返回登录
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				account: '',
				yzm: '',
				pwd: '',
				mobile: '',
				newpwd:'',
				tips: '',
				seconds: 60,
			};
		},
		methods: {
			findpwd(){
				
				this.$api.post('/resetpwd', {
					type: 'mobile',
					mobile: this.mobile,
					newpassword: this.pwd,
					captcha: this.yzm
				}).then(res => {
					if (res.code == 1) {
						uni.$u.toast(res.msg);
						setTimeout(() => {
							this.$back();
						}, 1000)
					}
				}).catch((res) => {
				
				})
			},
			codeChange(text) {
				this.tips = text;
			},
			tologin(){
				
				this.$goTo('/pages_login/login/login')
			},
			getCode() {
				if (!(/^1[3456789]\d{9}$/.test(this.mobile))) {
					uni.$u.toast('请输入正确的手机号');
					return;
				}
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					this.$api.post('/sms', {
						event: 'resetpwd',
						mobile: this.mobile,
					}).then(res => {
						if (res.code == 1) {
							uni.$u.toast('已发送');
							setTimeout(() => {
								uni.hideLoading();
								// 这里此提示会被this.start()方法中的提示覆盖
								uni.$u.toast('验证码已发送');
								// 通知验证码组件内部开始倒计时
								this.$refs.uCode.start();
							}, 1000);
						}
					}).catch((res) => {
					
					})
					
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			end() {
				// uni.$u.toast('倒计时结束');
			},
			start() {
				// uni.$u.toast('倒计时开始');
			}
		}
	}
</script>

<style lang="scss">
	.login {
		position: relative;
		height: 100vh;
		box-sizing: border-box;
		overflow: auto;
		.bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
		}
	}

	.Title {
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #18274A;
		font-size: 56rpx;
		position: relative;
	}

	.LoginForm {
		position: relative;
		background-color: #fff;
		border-radius: 30rpx;
		padding: 30rpx;
		box-sizing: border-box;
		width: 90vw;
		margin: 50rpx auto;

		.LoginForm_title {
			font-size: 28rpx;

			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 20rpx;
			}
		}

		.inputbox {
			background-color: #F8FAFB;
			border-radius: 40rpx;
			padding: 20rpx 20rpx 20rpx 40rpx;
			width: 90%;
			margin: 30rpx auto;
			justify-content: space-between;

			.green {
				font-size: 28rpx;
				color: #00CE9B;
			}

			.shu {
				width: 3rpx;
				height: 30rpx;
				background-color: #00CE9B;
			}

			.ppp {
				font-size: 28rpx;
			}
		}
	}

	.mianbtn {
		width: 90%;
		font-size: 28rpx;
		color: #fff;
		background-color: #00CE9B;
		text-align: center;
		padding: 30rpx 0;
		margin: 50rpx auto 30rpx;
		border-radius: 40rpx;
	}

	.register {
		font-size: 28rpx;

		text {
			&:nth-child(1) {
				color: #B4BABE;
			}

			&:nth-child(2) {
				color: #00CE9B;
			}
		}
	}

	.bottom {
		width: 100vw;
		font-size: 28rpx;
		position: fixed;
		bottom: 100rpx;
		color: #00CE9B;
		.circle {
			width: 28rpx;
			height: 28rpx;
			border: 2rpx solid #999;
			border-radius: 50%;
		}

		.green {
			color: #00CE9B;
		}
	}
</style>